<template>
	<view class="member_container">
		<view class="member_top">
			<view class="member_back">
				<text class="member_name" @click="goback">&lt;</text><text class="member_vip">VIP会员</text>
			</view>
			<view class="member_welcome">
				亲爱的 {{name}}
			</view>
			<view class="member_content">
				<view class="member_t">
					开通徕吧会员
				</view>
				<view class="member_c">
					畅想更多权益
				</view>
				<view class="member_f" @click="openVip">
					300元终身会员，立即开通
				</view>
			</view>
			<view class="member_ji">
				会员最高可获得300积分
			</view>
		</view>
		<view class="member_ftop">
			<view class="member_shu"></view>
			<view class="member_zhuan">
				会员专区
			</view>
		</view>
		<view class="member_footer">
			<view class="member_fft" v-for="item in goodsList" @click="nav(item.id)">
				<image :src="item.image.file_path" mode="aspectFill"></image>
				<view class="member_ffr">
					<view class="member_ftext">
						{{item.goods_name}}
					</view>
					<view class="member_pot">
						{{item.goods_price}}积分
					</view>
				</view>
			</view>
			<!-- <view class="member_line"></view> -->
		</view>
	</view>
</template>

<script>
	import {openVip} from "../../api/openVip.js"
	import {vipgoods} from"../../api/product.js"
	export default{
		data(){
			return{
				name:'',
				goodsList:[]
			}
		},
		onLoad() {
			this.name = uni.getStorageSync("userInfo").nickname
			this.getgoods()
		},
		methods:{
			goback(){
				uni.switchTab({
					url:'/pages/user/user'
				})
			},
			openVip(){
				this.post(openVip,{
					user_id:uni.getStorageSync("userInfo").id
				}).then(res => {
					if(res.code == 1){
						this.msg(res.msg)
					}
				})
			},
			// 获取vip产品
			async getgoods(){
				let res=await this.get(vipgoods)
				this.goodsList=res.data.product
			},
			nav(id){
				this.msg("正在开发，敬请期待","none")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.member_container{
		.member_top{
			width: 750rpx;
			background: linear-gradient(135deg, #4D4D4D 0%, #000000 100%);
			opacity: 1;
			padding: 0 30rpx;
			padding-top: 28rpx;
			.member_back{
				.member_name{
					font-size: 50rpx;
					font-family: '楷体';
					font-weight: 600;
					color: #EBD07A;
					opacity: 1;
					vertical-align: middle;
				}
				.member_vip{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #EBD07A;
					opacity: 1;
					margin-left: 21rpx;
					vertical-align: middle;
				}
			}
			.member_welcome{
				height: 112rpx;
				line-height: 112rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #EBD07A;
				opacity: 1;
			}
			.member_content{
				width: 690rpx;
				height: 377rpx;
				background: #2F2F2F;
				opacity: 1;
				border-radius: 14rpx;
				text-align: center;
				.member_t{
					font-size: 58rpx;
					font-family: PingFang SC;
					font-weight: 100;
					color: #EBD07A;
					opacity: 1;
					padding-top: 35rpx;
				}
				.member_c{
					font-size: 58rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #EBD07A;
					opacity: 1;
					margin-top: 17rpx;
				}
				.member_f{
					width: 439rpx;
					height: 71rpx;
					background: #EBD07A;
					opacity: 1;
					border-radius: 41rpx;
					line-height: 71rpx;
					margin-left: 126rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 700;
					color: #070707;
					opacity: 1;
					margin-top: 40rpx;
				}
			}
			.member_ji{
				height: 84rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 300;
				line-height: 84rpx;
				color: #EBD07A;
				opacity: 1;
				text-align: center;
			}
		}
		.member_ftop{
			padding: 0 30rpx;
			display: flex;
			height: 45rpx;
			line-height: 45rpx;
			margin-top: 30rpx;
			.member_shu{
				width: 6rpx;
				height: 23rpx;
				background: #EBD07A;
				opacity: 1;
				border-radius: 4rpx;
				margin-top: 13rpx;
			}
			.member_zhuan{
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #292929;
				opacity: 1;
				margin-left: 11rpx;
			}
		}
		.member_footer{
			padding: 0 30rpx;
			margin-top: 19rpx;
			.member_fft{
				width: 690rpx;
				height: 170rpx;
				display: flex;
				margin-top: 30rpx;
				image{
					width: 170rpx;
					height: 170rpx;
				}
				.member_ffr{
					width: 467rpx;
					height: 80rpx;
					margin-left: 40rpx;
					.member_ftext{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 300;
						line-height: 40rpx;
						color: #333333;
						opacity: 1;
						overflow: hidden;  
						text-overflow: ellipsis;  
						display: -webkit-box;  
						-webkit-line-clamp: 2;  
						-webkit-box-orient: vertical;
					}
					.member_pot{
						height: 40rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 40rpx;
						color: #EBD07A;
						opacity: 1;
						margin-top: 50rpx;
					}
				}
				
			}
			.member_line{
				width: 690rpx;
				height: 0rpx;
				border: 1rpx solid #DCDCDC;
				opacity: 1;
				margin-top: 31rpx;
			}
		}
	}
</style>
